<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<el-form slot="query" ref="form" :inline="true">
			<!-- 申请人账号 -->
			<el-form-item :label="$t('dxn.card_ables_list.apply_name')">
				<el-input
					v-input="{ name: 'symbols' }"
					clearable
					v-model="form.proxyName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<!-- <el-form-item label="申请人名称">
				<el-input clearable v-model.trim="form.proxyRealName" placeholder="请输入" />
			</el-form-item> -->
			<!-- 所属总代账号 -->
			<el-form-item :label="$t('dxn.card_ables_list.belong_total_agent')">
				<el-input
					v-input="{ name: 'symbols' }"
					clearable
					v-model="form.topProxyName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<!-- 审核人账号 -->
			<el-form-item :label="$t('dxn.card_ables_list.audit_name')">
				<el-input
					v-input="{ name: 'symbols' }"
					clearable
					v-model="form.auditName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<!-- 审核结果 -->
			<el-form-item :label="$t('dxn.card_ables_list.audit_status')">
				<el-select clearable v-model="form.auditStatus">
					<el-option value="" label="全部" />
					<el-option value="3" label="同意" />
					<el-option value="2" label="拒绝" />
				</el-select>
			</el-form-item>
			<!-- 申请时间 -->
			<el-form-item :label="$t('dxn.card_ables_list.apply_time')">
				<el-date-picker
					v-model="form.applyDate"
					size="medium"
					:picker-options="pickerShortcut2"
					format="yyyy-MM-dd HH:mm:ss"
					type="datetimerange"
					range-separator="-"
					:start-placeholder="$t('common.start_date')"
					:end-placeholder="$t('common.end_date')"
					align="right"
					:clearable="true"
					value-format="timestamp"
					style="width: 430px"
					:default-time="defaultTime"
				></el-date-picker>
			</el-form-item>
			<!-- 审核时间 -->
			<el-form-item :label="$t('dxn.card_ables_list.audit_time')">
				<el-date-picker
					v-model="form.auditDate"
					size="medium"
					:picker-options="pickerShortcut2"
					format="yyyy-MM-dd HH:mm:ss"
					type="datetimerange"
					range-separator="-"
					:start-placeholder="$t('common.start_date')"
					:end-placeholder="$t('common.end_date')"
					align="right"
					:clearable="true"
					value-format="timestamp"
					style="width: 430px"
					:default-time="defaultTime"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					:disabled="loading"
					:loading="loading"
					size="medium"
					@click="search"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					:disabled="loading"
					size="medium"
					@click="reset"
				>
					{{ $t('common.reset') }}
				</el-button>
			</el-form-item>
		</el-form>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					type="index"
					:label="`${$t('dxn.game_rule.serial_number')}`"
					width="60"
					align="center"
				/>
				<!-- 审核时间 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.audit_time')"
					min-width="170"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.auditDatetime || '-' }}
					</template>
				</el-table-column>
				<!-- 申请时间 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.apply_time')"
					min-width="170"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<!-- 申请人账号 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.apply_name')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 所属总代账号 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.belong_total_agent')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 俱乐部名称 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.club_name')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.clubName || '-' }}
					</template>
				</el-table-column>
				<!-- 俱乐部头像 -->
				<el-table-column
					prop="iconUrl"
					align="center"
					:label="$t('dxn.card_ables_list.club_header')"
					width="100"
				>
					<template slot-scope="scope">
						<el-avatar
							:src="scope.row.iconUrl"
							class="show-avatar"
							fit="fill"
						/>
					</template>
				</el-table-column>
				<!-- 俱乐部介绍 -->
				<el-table-column
					prop="introduction"
					align="center"
					:label="$t('dxn.card_ables_list.club_desc')"
					minWidth="190"
				>
					<template slot-scope="scope">
						<!-- {{ scope.row.introduction || '-' }} -->
						<el-tooltip
							v-if="scope.row.introduction.length > 12"
							class="item"
							effect="dark"
							placement="top"
						>
							<div class="tooltip-content" slot="content">
								{{ scope.row.introduction || '-' }}
							</div>
							<div class="tooltip-trigger">
								{{ scope.row.introduction || '-' }}
							</div>
						</el-tooltip>
						<span v-else>
							{{ scope.row.introduction || '-' }}
						</span>
					</template>
				</el-table-column>
				<!-- 审核人账号 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.audit_name')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.auditName || '-' }}
					</template>
				</el-table-column>

				<!-- 处理结果 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.deal_status')"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<el-tag :type="auditStatusStyle[scope.row.auditStatus]">
							{{ auditStatusText[scope.row.auditStatus] || '-' }}
						</el-tag>
					</template>
				</el-table-column>
				<!-- 审核备注 -->
				<el-table-column
					prop="auditRemark"
					align="center"
					:label="$t('common.remark')"
					minWidth="120"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						{{ scope.row.auditRemark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="!!total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:total="total"
				:pager-count="9"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

const initDate = () => [
	dayjs()
		.startOf('day')
		.subtract(7, 'day')
		.valueOf(),

	dayjs()
		.endOf('day')
		.valueOf()
]

export default {
	name: routerNames.clubLogs,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			form: {
				applyName: '',
				auditName: '',
				applyDate: initDate(), // 申请时间 [applyTimeStart, applyTimeEnd]
				auditDate: initDate() // 审核时间 [auditTimeStart, auditTimeEnd]
			},
			pageSize: 100,
			auditStatusStyle: {
				0: 'info',
				1: 'info',
				2: 'danger',
				3: 'success'
			},
			auditStatusText: {
				0: '待处理',
				1: '处理中',
				2: '审核拒绝',
				3: '审核通过'
			}
		}
	},
	methods: {
		reset() {
			Object.keys(this.form).forEach((key) => {
				this.form[key] = ''
			})
			this.form.applyDate = initDate()
			this.form.auditDate = initDate()
			this.initList()
		},

		formatDate(dateTime) {
			if (dateTime) {
				return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss')
			}
			return ''
		},

		formatParams() {
			const applyDate = this.form.applyDate || []
			const auditDate = this.form.auditDate || []

			const queryCondition = Object.assign({}, this.form, {
				// 申请时间
				applyTimeStart: this.formatDate(applyDate[0]),
				applyTimeEnd: this.formatDate(applyDate[1]),
				applyDate: '',

				auditTimeStart: this.formatDate(auditDate[0]),
				auditTimeEnd: this.formatDate(auditDate[1]),
				auditDate: ''
				// 审核时间
			})

			Object.keys(queryCondition).forEach((k) => {
				if (queryCondition[k] === '') {
					queryCondition[k] = undefined
				}
			})
			return {
				...this.pageParams,
				...queryCondition
			}
		},

		// 处理api
		async loadData() {
			this.loading = true
			const params = this.formatParams()
			await this.$api
				.clubManageClubAuditList(params)
				.then((res) => {
					if (res?.code === 200 && res?.data) {
						const { pageNum, pageSize, record = [], totalRecord } =
							res.data || {}

						this.pageNum = pageNum
						this.pageSize = pageSize
						this.list = record
						this.total = totalRecord || 0
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .show-avatar {
	img {
		width: 100%;
		height: 100%;
	}
}
.tooltip-content {
	width: 250px;
}
.tooltip-trigger {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
